<template>
  <div class="student">
    <h2>学生姓名 {{ name }}</h2>
    <h2>性别 {{ sex }}</h2>
    <h2>当前求和为：{{ number }}</h2>
    <button @click="add">点我number++</button>
    <button @click="sendStudentName">点我把学生名给App</button>
    <button @click="unbind">解绑atguigu自定义事件</button>
    <button @click="death">销毁当前Student组件的实例对象(vc)</button>
  </div>
</template>

<script>
export default {
  name: "Vue2Student",

  data() {
    return {
      name: "张三",
      sex: "男",
      number: 0,
    };
  },
  methods: {
    sendStudentName() {
      // 使用$emit触发Student组件身上的自定义atguigu事件并传递参数
      this.$emit("atguigu", this.name, 666, 888, 900);
      // this.$emit("demo");
      // this.$emit("click");
    },
    unbind() {
      // 解绑一个自定义事件
      this.$off("atguigu");
      // 解绑多个事件
      // this.$off(['atguigu','demo']);
      // 解绑所有自定义事件
      // this.$off();
    },
    death() {
      // 销毁当前组件实例对象 当组件实例对象被销毁了,自定义事件也全都不奏效了
      this.$destroy();
    },
    add() {
      console.log("add回调被调用了");
      this.number++;
    },
  },
};
</script>

<!-- lang="xx" 可以为 css less sass... -->
<!-- 直接使用less会报错需要安装less-loader：npm i less-loader -->
<!-- 不写 lang 默认为css -->
<style scoped lang="less">
.student {
  background-color: pink;
  padding: 5px;
  margin-top: 30px;
}
</style>
